<template>
  <div class="home-container">
    <div>
      <scroll-swiper
        class="g-flex-box kaijiang-warp"
        v-model="currentIndex"
        :navs="tabs"
      >
        <template v-for="(item, index) in tabs" :key="index" v-slot:[index]>
          <component
            :is="item.is"
            :actived="currentIndex == index"
            :type="item.type"
          />
        </template>
      </scroll-swiper>
    </div>
    <BottomMenu></BottomMenu>
  </div>
</template>

<script>
import BottomMenu from 'lottery/components/BottomMenu/BottomMenu';
import ScrollSwiper from 'lottery/components/ScrollSwiper/ScrollSwiper';
import { shallowRef } from 'vue';
import National from './components/national/national.vue';
import Place from './components/place/place.vue';

export default {
  name: 'VueJiangduoduoComKaijiang',
  components: {
    BottomMenu,
    ScrollSwiper,
    National,
    Place,
  },
  data() {
    return {
      currentIndex: 0,
      tabs: [
        {
          title: '全国彩',
          is: shallowRef(National),
          type: 0,
        },
        {
          title: '地方彩',
          is: shallowRef(Place),
          type: 1,
        },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.home-container {
  height:calc(00vh - 100px) ;
  width: 100%;
  padding-bottom: 50px;
  font-size: 13px;
}

</style>
